<template>
    <div class="app-container">
        <el-form ref="queryForm" :model="queryParams" size="small" :inline="true">
            <el-form-item label="药品名称" prop="goodsName">
                <el-input v-model="queryParams.goodsName" placeholder="请输入内容" clearable style="width: 240px"
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="排序" prop="orderType">
                <el-select v-model="queryParams.orderType" placeholder="请选择状态">
                    <el-option v-for="dict in dict.type.sys_sort" :key="dict.value" :label="dict.label"
                        :value="dict.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="时间" prop="date">
                <el-date-picker v-model="queryParams.date" value-format="yyyy-MM-dd HH:mm:ss"
                    :picker-options="pickerOptions" type="datetimerange" range-separator="-" start-placeholder="开始日期"
                    end-placeholder="结束日期" align="right">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" class="add"
                    @click="handleQuery">查询</el-button>
                <el-button icon="el-icon-refresh"  class="delBtn" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-table ref="table" :key="tableKey" v-loading="loading" :data="roleList" style="margin-top: 20px">
            <el-table-column label="查询次数" prop="queryCount" />
            <el-table-column label="货品ID" prop="goodsId" />
            <el-table-column label="药品名称" prop="goodsName" />
            <el-table-column label="商品名" prop="currencyName" />
            <el-table-column label="规格" prop="goodsType" />
            <el-table-column label="厂家" prop="factoryName" />
      
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getListData" />
    </div>
</template>

<script>
import { getHistoryList } from "@/api/medicineManage/sort";
export default {
    name: "Role",
    dicts: ["sys_sort"],
    data() {
        return {
            pickerOptions: {
                shortcuts: [
                    {
                        text: "最近一周",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "最近一个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "最近三个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit("pick", [start, end]);
                        },
                    },
                ],
            },
            tableKey: 0,
            // 遮罩层
            loading: false,
            // 总条数
            total: 10,
            // 角色表格数据
            roleList: [],
            // 查询参数
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                goodsName: "",
                date: "",
                orderType:""
            },
        };
    },
    created() {
        this.getListData();
    },
    methods: {
        /** 查询角色列表 */
        getListData() {
            this.loading = true;
            getHistoryList({
                ...this.queryParams,
                startDate: this.queryParams.date[0],
                endDate: this.queryParams.date[1],
            }).then((response) => {
                this.roleList = response.data.records;
                this.total = response.data.total || 0;
                this.loading = false;
            });
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.$nextTick(() => {
                this.getListData();
            });
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.queryParams.pageNum = 1;
            this.resetForm("queryForm");
            this.handleQuery();
        },
    },
};
</script>
<style lang="scss" scoped>
.footerForm {
    margin-left: 200px;
}

.formBox {
    width: 600px;
    margin-top: 40px;
}

.btnText {
    color: #0052d9 !important;
}

.dialogForm {
    ::v-deep .el-form-item {
        margin-bottom: 10px;
    }

    ::v-deep.el-form--label-top .el-form-item__label {
        padding: 0;
    }
}

.add {
    background: #0052d9;
    color: #fff;
    border: none;
}

.delBtn {
    background: #e7e7e7;
    color: #000;
    border: none;
}

.open {
    width: 52px;
    height: 32px;
    background: #e3f9e9;
    border-radius: 3px 3px 3px 3px;
    border: 1px solid #2ba471;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 400;
    font-size: 14px;
    color: #2ba471;
}

.close {
    width: 52px;
    height: 32px;
    background: #d8d8d8;
    border-radius: 3px 3px 3px 3px;
    border: 1px solid #767676;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 400;
    font-size: 14px;
    color: #767676;
}

.statusBox {
    width: 100%;
    display: flex;
    justify-content: center;
}

.status_div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 66px;
    height: 32px;
    background: #ffffff;
    border-radius: 3px;
    border: 1px solid #e7e7e7;
    font-size: 14px;
    background: #f3f3f3;
    color: rgba(0, 0, 0, 0.9);
    line-height: 1;

    &.jxz {
        background: #f2f3ff;
        border: 1px solid #0052d9;
        color: #0052d9;
    }

    &.ywc {
        background: #e3f9e9;
        border: 1px solid #2ba471;
        color: #2ba471;
    }
}

.img {
    width: 38px;
    height: 38px;
}
</style>